<template>
    <view class="content">
        <view class="order-tabs">
            <tab ref="tab" :list="tabList" @tabChange="tabChange" :index="active"></tab>
        </view>

        <view class="order-list">
			<view class="goods-wrap" v-for="(item, index) in tabList[active].list">
				<goods-item :item="item" :key="item.id" type="order"></goods-item>
			</view>
            <!-- 商品骨架 -->
            <template v-for="i in ['a', 'b', 'c', 'd']">
                <view class="skeleton-wrap"
                      v-if="tabList[active].list.length === 0 &&
						!tabList[active].finished &&
						!tabList[active].empty"
                >
                    <skeleton class="goods-skeleton" :loading="true" avatarShape="square" :row="4" avatarSize="250rpx"></skeleton>
                </view>
            </template>
        </view>

        <!-- 加载状态 -->
        <view class="load-status">
            <load-more status="loading" color="#c6c6c6" iconType="circle" v-if="!tabList[active].finished && !tabList[active].empty"
                    :contentText="contentText"></load-more>
            <load-more status="noMore" color="#c6c6c6" v-if="tabList[active].finished" :contentText="contentText"></load-more>
            <empty v-if="tabList[active].empty" emptyText="您还没有订单呦~" emptyType="order"></empty>
        </view>

        <!-- 回到顶部 -->
        <u-back-top :scroll-top="scrollTop" top="10"></u-back-top>
    </view>
</template>

<script>
    import Tab from "@/components/Tab";
    import GoodsItem from "@/components/GoodsItem";
    import Empty from "@/components/Empty";
    import Skeleton from '@/components/uni/Skeleton';
    import LoadMore from "@/components/uni/LoadMore";
    import loader from '@/utils/mixin/loader';
    export default {
        name: "list",
        mixins: [loader],
        components: {
            Tab,
			GoodsItem,
            Empty,
            Skeleton,
            LoadMore,
        },
        onLoad(options) {
			let tabList = [
				{
					label: '拼团成功'
				},
				{
					label: '拼团失败'
				},
			];
			
			tabList.forEach(item => {
			    item.loading = false;
			    item.finished = false;
			    item.error = false;
			    item.empty = false;
			    item.page = 1;
			    item.list = [];
			});
			
			this.tabList[0].label = '拼团中';
			
			this.tabList = this.tabList.concat(tabList);
			
            if (options.type) {
                this.active = parseInt(options.type);
				this.onRefresh(this.tabList[this.active]);
            } else {
				this.initPage();
			}
        },
        onShow() {
            // #ifdef MP-WEIXIN
            uni.reportAnalytics('enter_wodept');
            // #endif
        },
        methods: {
            initPage() {
				this.loadMore(this.tabList[this.active]);
            },
            // 加载前参数处理
            beforeLoader(item) {
                // 根据分类id筛选订单
				if (this.active === 0) {
					this.params.status = 1;
				}
				if (this.active === 1) {
					this.params.status = 3;
				}
				if (this.active === 2) {
					this.params.status = 2;
				}
				this.params.order = 'createTime';

                this.service = this.$service.order.combinationUser.page(this.params);
                return true;
            }
        }
    }
</script>

<style lang="scss" scoped>
.content {
	.order-list {
		padding: 0 20rpx;
        margin-top: 10rpx;
		.goods-wrap {
			margin-bottom: 20rpx;
			&:last-child {
				margin-bottom: 0
			}
		}
		.skeleton-wrap {
			margin-bottom: 20rpx;
			background: #fff;
			border-radius: 16rpx;
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}
/deep/.u-tabs {
    position: relative;
    .u-tab-item {
        position: relative;
        z-index: 2;
    }
    .u-tab-bar {
        height: 14rpx!important;
        width: 70rpx!important;
        margin-left: -15rpx;
        bottom: 10rpx;
        z-index: 1;
    }
}
</style>